<template>
	<Button 
		:style 	= 'style'
		:type 	= 'type'
		:shape 	= 'shape'
		:danger = 'danger'
		size 	= 'small'
		@click = 'onClick'
	>
		<template #icon>
			<template v-if="mode === 'download'"><DownloadOutlined class='no-event'/></template>
			<template v-else-if="mode === 'search'"><SearchOutlined class='no-event'/></template>
			<template v-else-if="mode === 'del' || mode === 'delPop'"><DeleteOutlined class='no-event'/></template>
			<template v-else-if="mode === 'add'"><PlusOutlined class='no-event'/></template>
			<template v-else-if="mode === 'back'"><RollbackOutlined class='no-event'/></template>
			<template v-else-if="mode === 'mod'"><EditOutlined class='no-event'/></template>
			<template v-else-if="mode === 'reset'"><FileSyncOutlined class='no-event'/></template>
			<template v-else-if="mode === 'upload'"><UploadOutlined class='no-event'/></template>
			<template v-else-if="mode === 'set'"><SettingOutlined class='no-event'/></template>
			<template v-else-if="mode === 'user'"><UserAddOutlined class='no-event'/></template>
			<template v-else-if="mode === 'refresh'"><RedoOutlined class='no-event'/></template>
			<template v-else-if="mode === 'clear'"><ClearOutlined class='no-event'/></template>
		</template>
		{{label}} {{code}}
		<slot></slot>
	</Button>
</template>

<script setup>
	import { onMounted, onUnmounted } from 'vue'
	import { Button } from 'ant-design-vue'
	import { RedoOutlined, DownloadOutlined, UploadOutlined, SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined, ClearOutlined, SettingOutlined, RollbackOutlined, FileSyncOutlined, UserAddOutlined } from '@ant-design/icons-vue'
	/* --------------------------- Data --------------------------- */
	const { mode, stop, icon, code, size } = defineProps({
		label	: { type:String, default:null },
		type	: { type:String, default:'primary' },
		size	: { type:String, default:'small' },
		width 	: { type:[String, Number], default: 'none'},
		code 	: String,
		mode 	: String,
		icon 	: String,
		shape	: String,
		danger	: Boolean,
		isIcon	: { type:[Boolean, Number]},
		stop 	: { type:Boolean, default: true },
		style 	: { type:Object, default: ({ size, width, type, isIcon, style={} }) => {
			const sizeStyle = $fn.isNumber(size) ? {height:size + 'px'} : $config.antd.btnSize[size]
			const linkStyle = type === 'link' ? { lineHeight: ($fn.isNumber(size) ? size + 'px' : $config.antd.btnSize[size].height) } : null
			let padding = '0 8px'
			if( isIcon ){
				padding = 0
				width = $config.antd.btnSize[size].height
			}
			if( size === 'mini'){ padding = '0 4px' }
			width  = $.setPx(width)
			return { minWidth:width, padding, lineHeight:'100%', ...sizeStyle, ...linkStyle, ...style }
		}},
	})
	
	const emit = defineEmits(['click'])
	
	const onClick = e => {
		if(stop) {
			e.stopPropagation()
		}
		emit('click')
	}
	
	const onEnter = e => {
		if(e.code === code || ( code==='Enter' && e.code === 'NumpadEnter')){
			emit('click')
			e.preventDefault()
		}
	}
	
	onMounted(() => {
		if(code){
			window.addEventListener('keydown', onEnter)
		}
	})
	
	onUnmounted(() => {
		if(code){
			window.removeEventListener('keydown',onEnter)
		}
	})
</script>